<script>
export default {
    data: () => {
        return {
            appName: "测试标签页面",
            routes: [],
            //当前打开的导航
            currentPath: '',
            //当前打开的标签
            currentTagName: '',
            tabs: []
        };
    },
    mounted() {
        //初始化导航信息
        this.initRoutes();
        //获取实践路由导航页面，打开标签
        const path = this.$route.query.path;
        this.addTag(path);
    },
    beforeRouteUpdate(to, from) {
        //当停留在标签页且路由更新时，打开标签
        this.addTag(to.query.path);
    },
    methods: {
        initRoutes() {
            const menuRoutes = [];
            this.$router.getRoutes().forEach(route => {
                if(!route.meta || !route.meta.hidden) {
                    const menuRoute = { 
                        name: route.name,
                        path: route.path, 
                        children: [] 
                    }
                    menuRoutes.push(menuRoute);
                    route.children && route.children.forEach(child => {
                        const index = menuRoutes.findIndex(x => x.path == child.path);
                        //删除子导航条目
                        if(index > -1) 
                            menuRoutes.splice(index, 1);
                        menuRoute.children.push({
                            name: child.name,
                            path: child.path,
                            component: child.component
                        })
                    });
                }
            });
            this.routes = menuRoutes;
        },
        onTagRemove(targetName) {
            const index = this.tabs.findIndex(x => x.path == targetName);
            this.tabs.splice(index, 1);
            this.currentTagName = this.tabs[0].path;
            this.currentPath = this.tabs[0].path;
            //处理路由，跳转到第一个标签的路由
            this.$router.replace(this.currentPath)
        },
        //打开标签
        addTag(path) {
            //找到符合当前导航路径的路由信息
            const route = this.findRouteByPath(this.routes, path);
            const exists = this.tabs.find(x => x.path == route.path);
            //已打开标签不重复打开
            if(!exists) {
                this.tabs.push(route);
            }
            this.currentTagName = route.path;
            this.currentPath = route.path;
        },
        findRouteByPath(routes, path) {
            for (let i = 0; i < routes.length; i++) {
                const route = routes[i];
                if(route.path == path)
                    return route;
                if(route.children) {
                    const childRoute = this.findRouteByPath(route.children, path);
                    if(childRoute)
                        return childRoute;
                }
            }
        }
     }
}
</script>
<template>
    <el-container>
    <el-header>
      <el-menu
        :default-active="currentPath"
        class="el-menu-demo"
        mode="horizontal"
        :ellipsis="false"
        :router="true">
        <h1>{{ appName }}</h1>
        <el-sub-menu 
          v-for="route in routes" 
          :key="route.path"
          :index="route.path">
          <template #title>{{route.name}}</template>
          <el-menu-item 
            v-for="child in route.children" 
            :key="child.path" 
            :index="child.path">{{child.name}}</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-header>
    <el-main>
      <el-tabs 
        type="border-card"
        v-model="currentTagName"
        :closable="tabs.length > 1"
        @tab-remove="onTagRemove">
        <el-tab-pane 
          v-for="tab in tabs" 
          :key="tab.path" 
          :label="tab.name"
          :name="tab.path">
          <component :is="tab.component"></component>
        </el-tab-pane>
      </el-tabs>
    </el-main>
    <el-footer></el-footer>
  </el-container>
</template>